﻿<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Slider Demo Page</title>
<style type="text/css">
.slider{
	position:absolute;
	width:10px;
	height:10px;
	border:1px solid red;
	background-color:#ffaaaa;
	cursor:move;
}
</style>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript">
function $(id){return document.getElementById(id);}

function setNumber(v){
	$("resVal").value = v;
}

function stop(v){
	alert("stopped on "+v);
}

new Slider("slider1", {xRange:{min:50, max:400}, yRange:{min:80, max:300}});
new Slider("slider2", {lockX:true});
new Slider("slider3", {lockY:true, xRange:{min:45, max:250}, callback:setNumber, onstop:stop});

</script>
</head>
<body>
	<h1>Slider Demo Page</h1>
	<div>
		<input type="text" value="0" id="resVal">
	</div>
	<div id="slider1" class="slider" style="left:100px;top:100px;"></div>
	<div id="slider2" class="slider" style="left:180px;top:100px;"></div>
	<div id="slider3" class="slider" style="left:50px;top:200px;"></div>
</body>
</html>